<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>帮帮网-用户头像</title>
	<link href="/HelpSite/CSS/fileuploader.css" rel="stylesheet" type="text/css">	
    <link rel="stylesheet" type="text/css" href="/HelpSite/CSS/imgareaselect-default.css" media="screen"/>
    <style>    	
		body {font-size:13px; font-family:arial, sans-serif; margin:50px;}
        #imgArea {
            width: 400px;
            height: 400px;
            border: 1px solid
        }
    </style>	
	<script type="text/javascript" src="../JS/cookie.js"></script>
	<script type="text/javascript" src="../JS/httpRequest.js"></script>
    <script src="/HelpSite/JS/jquery-1.3.2.min.js"></script>
    <script src="/HelpSite/JS/fileuploader.js" type="text/javascript"></script>
    <script type="text/javascript" src="/HelpSite/JS/jquery.imgareaselect.pack.js"></script>
    <script>
		//全局变量 但是imgAreaWidth和#imgArea中的定义有什么区别呢
        var imgAreaWidth = 400;
        var imgAreaHeight = 400;
        var imgWidth = 0;
        var imgHeight = 0;
		var imgSelector;
		var zoomw = 0;
		var zoomh = 0;
		var zoom = 0;
		var oriFile;

		var OriginImage=new Image(); 
		function GetImageWidth(oImage) 
		{ 
			if(OriginImage.src!=oImage.src)OriginImage.src=oImage.src; 
			return OriginImage.width; 
		} 
		function GetImageHeight(oImage) 
		{ 
			if(OriginImage.src!=oImage.src)OriginImage.src=oImage.src; 
			return OriginImage.height; 
		} 
		//详细出处参考：http://www.jb51.net/article/20601.htm

        function createUploader(){//onload就创建对象uploader 对应的id为file-uploader  action是干嘛的呢         
			username=getCookie('username');
			userID = getCookie('userID');
			//alert('userID');
			//alert(userID);
			if (username!=null && username!="")
			{
				alert('Welcome again '+username+'!')
			}
			else
			{
				alert('请先登录');
				return false;
			}
            var uploader = new qq.FileUploader({
                element: document.getElementById('file-uploader'),
                action: '/HelpSite/imgpick/upload.php',	//后台处理程序
                onComplete: function(id, fileName, responseJSON){//onComplete什么时候会调用
                    loadPreview(responseJSON['filepath'], "imgPreview0");//
                    loadPreview(responseJSON['filepath'], "imgPreview1");
                    loadPreview(responseJSON['filepath'], "imgPreview2");
                    insertImg(responseJSON['filepath'], "imgView");
                },
                showMessage: function(message){ alert(message); },
                debug: false
				//debug: true
            });           
        }
        
        function insertImg(filepath, imgId) {
            var imgView = document.getElementById(imgId);// 调用的时候 imgId是“imgView” 
            imgView.removeAttribute("width"); //
            imgView.removeAttribute("height");
            $(imgView).attr("src", filepath); //定义属性 这明显是一个img 的 element吧 src 是filepath 但是 但是 但是filepath是啥时候传进来的呢
			//add by kakassi 
			oriFile = filepath;
            $(imgView).load(function() { //img的load 属于在图片加载之前做的一些操作
                
				if (this.width > imgAreaWidth) {	//强制调整this的 width和height？ 难道调整width的时候  height会随之自动调整？
                    this.width = imgAreaWidth;           
                }
                if (this.height > imgAreaHeight) {//
                    this.height = imgAreaHeight;	//zoom记录了缩放比例 但只在哪里用的呢
                }

                imgWidth = this.width;	//这个是实际的大小 
                imgHeight = this.height;//在ie下 这两个可能都不会支持 不知道为什么 所以我选择使用naturalWidth 和 clientWidth来计算
				//分两种方式取得zoomw 是为了兼容ie chrome ff 
				if(this.naturalWidth)
				{
					zoomw = this.naturalWidth/this.clientWidth;
					zoomh = this.naturalHeight/this.clientHeight;
				}
				else
				{
					zoomw = GetImageWidth(this)/this.clientWidth;
					zoomh = GetImageHeight(this)/this.clientHeight;
				}
				//alert(this.src);
				//alert(this.naturalWidth);
				//alert(this.clientWidth);

				//alert('zoomw  '+zoomw);

                centerImg(this);	//div框住了img 根据img的长宽 调整marginleft和margintop（属于外边距） 以使得图片实体img居中（相对于div）

                imgSelector = $(this).imgAreaSelect({//this里面的一个imgAreaSelect 
                    handles: true,	//handles instance都不知道是干嘛用的
                    instance: true,
					//selectionColor: 'blue',//选择区域的颜色 
					//selectionOpacity: 0.2,  //选择区域的透明度
					//borderWidth: 0, //选择层边框大小 
					//maxWidth: 400, 
					//maxHeight: 300,
                    aspectRatio: '1:1',
                    onSelectChange: preview, //选择区域变化时回调
                    x1: Math.round((imgWidth - 150) / 2),	// 矩形区域的边框
                    y1: Math.round((imgHeight - 150) / 2),
                    x2: Math.round((imgWidth - 150) / 2) + 150,
                    y2: Math.round((imgHeight - 150) / 2) + 150
                });
                // here we force to update imgAreaSelector
                imgSelector.update();
                preview(this, imgSelector.getSelection());
            })

        }

        function loadPreview(filepath, imgId) {
            var imgView = document.getElementById(imgId);
            $(imgView).attr("src", filepath);
        }
    
        function centerImg(imgElement) {
            $(imgElement).css("marginLeft", Math.round((imgAreaWidth - imgElement.width) / 2));
            $(imgElement).css("marginTop", Math.round((imgAreaHeight - imgElement.height) / 2));
        }

        function preview(img, selection) {//img图片元素 和 selection 即选择区域
            if (!selection.width || !selection.height)
                return;

            var sizeArr = [150, 50, 30];
            for (var i = 0; i < 3; ++i) {
                var scaleX = sizeArr[i] / (selection.width||1); //预览区域大小和选择区域大小的商 说明预览图片应该被拉升的程度
                var scaleY = sizeArr[i] / (selection.height||1);

                $('#imgPreview' + i).css({
                    width: Math.round(scaleX * imgWidth),	//实际大小诚意缩放尺度 得到缩放后的原图大小
                    height: Math.round(scaleY * imgHeight),	//
                    marginLeft: -Math.round(scaleX * selection.x1),	//x1 y1的位置 去计算
                    marginTop: -Math.round(scaleY * selection.y1)
                });
            }

        }
		function confirm()
		{
		    if(imgSelector)
			{
				var selection = imgSelector.getSelection();
				//alert(selection.x1);
				//alert(selection.y1);
				//alert(selection.x2);
				//alert(selection.y2);
				//alert(selection.width);
				//alert(selection.height);
				//alert(zoomw);
				//alert(oriFile);
				//alert(zoomh);
				var url="save.php";
				var para="x1="+zoomw*(selection.x1);
				para+="&y1="+zoomw*(selection.y1);
				para+="&x2="+selection.x2;
				para+="&y2="+selection.y2;
				para+="&w="+zoomw*(selection.width);
				para+="&h="+zoomw*(selection.height);				
				para+="&userID="+userID;
				para+="&oriFile="+oriFile;
				var resp=SendPostRequest(url,para);
				alert(resp);
				if(resp=="true")
				{
					alert("上传成功");
					window.location.href="../myspace.htm";
				}
				else
				{
					alert("上传失败 请再试");
				}
			}
			else
			{
				alert('帅锅 要不您先传个图片呗');
			}
		}

        window.onload = createUploader;     
    </script>    
</head>
<body>		
    <h3>帮帮网-上传头像</h3>
	<div id="file-uploader">		
    </div>

	<div id="confirm"> 
		<input type="button" onclick="confirm()" value="确认并上传" />
    </div>

    <table>
        <tr>
            <td>
                <div id="imgArea"> 
                    <img id="imgView" style="max-width:400px; max-height:400px"></img>
                </div>
            </td>
            <td style="padding:30px; vertical-align: text-top">
                <p style="color: #ff6600">你上传的头像会自动生成三种尺寸, </br>请注意中小尺寸的头像是否清晰</p>
                <table> 
                    <tr> 
                        <td>
                            <div class="preview" style="margin:20px; width: 150px; height: 150px; overflow: hidden;">
                                <img id="imgPreview0" style="width: 150px; height: 150px"></img>
                            </div>
                        </td>
                        <td style="padding: 20px; vertical-align: bottom; color: #666666">
                            大尺寸头像，150*150像素
                        </td>
                    </tr> 
                </table>
                <table> 
                    <tr> 
                        <td>
                            <div class="preview" style="margin:20px; width: 50px; height: 50px; overflow: hidden;">
                                <img id="imgPreview1" style="width: 50px; height: 50px"></img>
                            </div>
                        </td>
                        <td style="padding: 20px; vertical-align: bottom; color: #666666">
                            中尺寸头像，50*50像素
                        </td>
                    </tr> 
                </table>
                <table> 
                    <tr> 
                        <td>
                            <div class="preview" style="margin:20px; width: 30px; height: 30px; overflow: hidden;">
                                <img id="imgPreview2" style="width: 30px; height: 30px"></img>
                            </div>
                        </td>
                        <td style="padding: 20px; vertical-align: bottom; color: #666666">
                            小尺寸头像，30*30像素
                        </td>
                    </tr> 
                </table>
            </td>
        <tr>
    </table>
    <div id="size"></div>
    <div id="size1"></div>

</body>
</html>

